<template>
  <ul class="list">
    <li v-for="item in mlist" :key="item.id">
      <router-link :to="`/detail?id=${item.id}`">
        <img :src="item.img">
        <div class="info">
          <h3>{{item.title}}</h3>
          <p>豆瓣评分：9</p>
          <p><span class="tag" v-for="(tag,index) in item.tags.split(',')" :key="index">{{tag}}</span></p>
        </div>
      </router-link>
    </li>
  </ul>
</template>
<script>
import { mapActions, mapState } from 'vuex'

export default {
  computed: {
    //加入模块化的名字，名字在index.js里面定义的
    ...mapState('list', ['mlist'])
  },
  methods: {
    ...mapActions('list', ['queryMovieList'])
  },
  created () {
    this.queryMovieList()
  }
}
</script>
